<template>
	<view class="container">
		<view class="top">
			<view class="bg"></view>
			<view class="amount">{{userInfo.gtmoney}}</view>
			<view class="unit">我的押金(元)</view>
		</view>
		<view class="info">
			<view>
会员权益，是会员经过自身努力和贡献，升级到对应会员等级之后，所享受的专属权益，三个关键词：贡献、等级、专属。

1、贡献：用户贡献，包括用户登录、浏览、分享、购买、邀请、参与活动等，能提升平台数据指标的行为，用户做出对应行为之后，可获得对应成长值/经验值；

2、等级：会员等级指的是，平台对整体用户划分的等级，等级的判定标准为成长值/经验值，等级不同，所需的成长值/经验值不同；

3、专属：专属权益指的是，用户升级到对应等级之后，即可获得这个等级的专属权益，此权益只有这个等级才可享有。</view>
		</view>
		
		<view class="footer">
			<view class="buy" @click="goBuy()" v-if="userInfo && (userInfo.gt_money_status == 0 || userInfo.gt_money_status == 4)">交纳保证金</view>
			<view class="buy" @click="replyAmount()" v-if="userInfo && (userInfo.gt_money_status == 1 || userInfo.gt_money_status == 3)">申请退保证金</view>
			<view class="buy" @click="cancelReplyAmount()" v-if="userInfo && (userInfo.gt_money_status == 2)">取消退款保证金</view>
		</view>
	</view>
</template>

<script>
	import {getUserInfo} from '@/api/user.js';
	import {userGtMoneyPay,replyDeposit,cancelReplyDeposit} from '@/api/user_common.js';
	export default {
		data() {
			return {
				userInfo:{
					gtmoney:0.00
				},
				operationing:false
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
					console.info(res);
				});
			},
			//交纳保证金
			goBuy(){
				if(this.operationing){
					return;
				}
				
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定支付保订金？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在支付',
							})
							userGtMoneyPay({}).then(res => {
								console.info(res.data.data)
								uni.hideLoading();
								let jsConfig = res.data.data;
								let appId = jsConfig.appId;
								let timeStamp = jsConfig.timeStamp;
								let nonceStr = jsConfig.nonceStr;
								let packageX = jsConfig.package;
								let signType = jsConfig.signType;
								let paySign = jsConfig.paySign;
								
								console.info(appId, "appId")
								console.info(timeStamp, "timeStamp")
								console.info(nonceStr, "nonceStr")
								console.info(packageX, "package")
								console.info(signType, "signType")
								
								uni.requestPayment({
									timeStamp: jsConfig.timestamp,
									nonceStr: jsConfig.nonceStr,
									package: jsConfig.package,
									signType: jsConfig.signType,
									paySign: jsConfig.paySign,
									provider: 'wxpay',
									orderInfo: jsConfig,
									success: function(res) {
										that.operationing = false;
										that.getUserInfo();
										uni.showToast({
											icon:'success',
											title:'支付成功'
										})
									},
									fail: function(e) {
										that.operationing = false;
										console.info(e)
										uni.showToast({
											icon:'success',
											title:'支付失败'
										})
									},
									complete: function(res) {
										that.operationing = false;
										if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
											title: that.$t(`取消支付`)
										});
									}
								})
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
				        }//end if
				    }//end success method
				});
			},
			//申请退保证金
			replyAmount(){
				if(this.operationing){
					return;
				}
				
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定申请退款保证金？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在处理',
							})
							replyDeposit({}).then(res => {;
								console.info(res.data)
								that.operationing = false;
								uni.hideLoading();
								if(res.status == 200){
									that.getUserInfo();
									uni.showToast({
										icon:'success',
										title:res.msg
									})
								}else{
									uni.showToast({
										icon:'error',
										title:res.msg
									})
								}
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
				        }//end if
				    }//end success method
				});
			},
			//取消申请退保证金
			cancelReplyAmount(){
				if(this.operationing){
					return;
				}
				
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定取消退款保证金？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在处理',
							})
							cancelReplyDeposit({}).then(res => {;
								console.info(res.data)
								that.operationing = false;
								uni.hideLoading();
								if(res.status == 200){
									that.getUserInfo();
									uni.showToast({
										icon:'success',
										title:res.msg
									})
								}else{
									uni.showToast({
										icon:'error',
										title:res.msg
									})
								}
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
				        }//end if
				    }//end success method
				});
			}
		}
	}
</script>

<style lang="scss">
	.image{
		width: 100%;
		background-color: white;
	}
	.top{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f6d046;
		height: 400rpx;
		.bg{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 400rpx;
			background-image: url('~@/static/images/user_bg.png');
			background-size: 100% 400rpx;
		}
		.amount{
			font-size: 120rpx;
			font-weight: bold;
			color: #562e26;
			margin-top: 20rpx;
		}
		.unit{
			font-size: 30rpx;
			color: #562e26;
		}
	}
	
	.info{
		padding: 30rpx;
		background-color: white;
		margin-top: -10rpx;
		margin-bottom: 150rpx;
		font-size: 28rpx;
		line-height: 40rpx;
	}
	
	.footer {
		padding: 0 20rpx 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		height: 100rpx;
		height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		display: flex;
		flex-direction: row;
		align-items: center;
		.buy{
			width: 100%;
			height: 70rpx;
			border-radius: 35rpx;
			background-color: red;
			color: white;
			font-size: 28rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}
</style>
